<template>
  <!-- 背景 -->
  <div
    class="w-full h-[250px] relative"
    :style="{
      backgroundImage: `url(${bgImage})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
    }"
  >
    <div class="w-full absolute top-0 left-0">
      <WindowTab obj="home" font-color="text-white"></WindowTab>
    </div>
    <div class="absolute left-[100px] top-[190px]">
      <slot name="avatar"></slot>
    </div>
  </div>

  <div class="w-[65%] h-[calc(100vh-300px)] mx-auto mt-[50px] font-medium font-sm flex flex-col gap-4">
    <slot name="content"></slot>
  </div>
</template>

<script setup lang="ts">
import WindowTab from "@/components/WindowTab/index.vue";
withDefaults(
  defineProps<{
    bgImage: string;
  }>(),
  {
    bgImage: "",
  },
);
</script>

<style lang="scss" scoped></style>
